<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="renderer" content="webkit"/>
    <title>注册账户</title>
    <link rel="stylesheet" type="text/css" th:href="@{/css/signin.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/layui/css/layui.css}"/>
    <script type="text/javascript" th:src="@{/layui/layui.js}"></script>
    <script type="text/javascript" th:src="@{/js/jquery.min.js}"></script>
    <style>
        .from {
            width: 450px;
            height: 300px;
            margin: 5% auto 0;
        }

        .layui-form-label {
            font-size: 14px;
            color: #777;
        }

        .layui-btn {
            background-color: #BF2C24;
            color: white;
            width: 340px;
            height: 40px;
            text-align: center;
        }

        .email-code {
            background-color: #a5232e;
            color: #fff;
            font-size: 14px;
            line-height: 40px;
            text-align: center;
            border-radius: 3px;
            cursor: pointer;
            width: 100px;
        }

    </style>
</head>
<body>
<div id="head">
    <div class="reg-logo fl">
        <a th:href="@{/index}" class="fl"><img th:src="@{picture/logo.png}" alt="logo"></a>
    </div>
    <div class="reg-login fr">
        我已注册，现在就<a th:href="@{/login}" class="go-login">登录</a>
    </div>
</div>
<div class="reg-line"></div>
<div class="from">
    <form class="layui-form">
        <div class="layui-form-item">
            <label class="layui-form-label">昵称</label>
            <div class="layui-input-block">
                <label>
                    <input type="text" name="userName" lay-verify="required" lay-reqtext="昵称是必填项，岂能为空？"
                           placeholder="&#xe66f; 昵称" autocomplete="off" class="layui-input layui-icon">
                </label>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">邮箱</label>
            <div class="layui-input-block">
                <label>
                    <input id="email" type="text" name="userEmail" lay-verify="required" lay-reqtext="邮箱是必填项，岂能为空？"
                           placeholder="&#xe673; 邮箱" autocomplete="off" class="layui-input layui-icon">
                </label>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">密码</label>
            <div class="layui-input-block">
                <label>
                    <input type="password" name="password" lay-verify="required" lay-reqtext="密码是必填项，岂能为空？"
                           placeholder="&#xe673; 请输入密码" autocomplete="off" class="layui-input layui-icon">
                </label>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">邮箱验证码</label>
            <div class="layui-input-block">
                <label>
                    <input type="text" name="emailCode" lay-verify="required"
                           lay-reqtext="验证码是必填项，岂能为空？"
                           maxlength="8" placeholder="&#xe673; 验证码" autocomplete="off" class="layui-input layui-icon">
                    <br>
                    <br>
                    <button class="email-code" type="button" onclick="sendEmailCode()">发送验证码</button>
                </label>


            </div>
        </div>

        <!--错误信息显示-->
        <div class="layui-form-item">
            <span id="msg">
            </span>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="form">注册</button>
            </div>
        </div>
    </form>
</div>
</body>
<script>

    //触发邮件提醒
    function sendEmailCode() {
        let flag = confirm("您，确定要使用这个邮箱进行注册吗?");

        let email = $("#email").val();
        if (email.trim().length <= 0) {
            alert("请输入邮箱后在操作");
            return;
        }
        if (flag) {
            //发请求
            $.ajax({
                url: "/sendCode?email=" + email,
                method: "get",
                success: function (result) {
                    if (result == false) {
                        alert("验证码已发送，请稍等");
                    } else if (result == true) {
                        alert("发送成功，请注意接收！");
                    } else {
                        //返回的是错误信息，需要把错误信息打印在显眼的位置
                        $("#msg").html("<font color=\"red\">" + result.message + "</font>");
                    }
                }
            })
        }
    }


    layui.use(['form', 'layer'], function () {
        var form = layui.form;
        //监听提交
        form.on('submit(form)', function (data) {
            //发起异步请求
            $.ajax({
                url: "/user/register",
                method: "post",
                data: data.field,
                dataType: "json",
                success: function (result) {
                    if (result == true) {
                        window.location.href = '/login';
                    } else {
                        //返回的是错误信息，需要把错误信息打印在显眼的位置
                        $("#msg").html("<font color=\"red\">" + result.message + "</font>");
                    }
                },
            });
            return false;
        });
    });


</script>
</html>
